<!--
 * @Descripttion: 
 * @version: 
 * @Author: ybac
 * @Date: 2022-08-02 14:19:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-08-29 18:35:44
-->
<template>
  <div
    v-show="show"
    class="search-contents"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '0.6rem' }"
  >
    <!-- <Navbar appTitle="不合格数输入" /> -->

    <!-- <div class="pop-title">不合格数输入<div class="closeable"><van-icon name="cross" size="0.18rem" @click="show = false" /></div></div> -->
    <div class="list-wrap">
      <div
        v-if="GLOBAL.currentEnvironment"
        style="height:0.1rem;width:100%;background:#f5f5f5"
      ></div>
      <div
        class="list-item"
        v-for="(item, index) in currentData"
        :key="item.notQualifiedReason"
      >
        <div style="width: 30%">
          {{ subStrText(item.notQualifiedReasonText, 10) }}:
        </div>
        <van-field
          placeholder="请输入"
          style="width: 50%"
          v-model="item.notQualifiedNum"
          @input="formatInput(index, item.notQualifiedNum)"
        />
      </div>
    </div>
    <div
      style="display:flex; align-items:center;position: fixed;bottom:0;width:100%;z-index:999999;background:#fff"
    >
      <div
        style="width: 50%;padding-left:0.14rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;z-index:999999"
      >
        原因：{{ reasonNum }} 总数：{{ num }}
      </div>
      <div class="search-bottoms">
        <span class="btncancel" @click="cancel">取消</span>
        <span class="btnconfirm" @click="comfirm">确定</span>
      </div>
    </div>
  </div>
</template>
<script>
import { clearNoNum } from "@/utils/util";
import Navbar from "@/components/navBar/navBar_right";
export default {
  components: { Navbar },
  data() {
    return {
      show: false,
      columns: [
        {
          title: "不合格原因",
          dataIndex: "notQualifiedReasonText",
        },
        {
          title: "不合格数",
          dataIndex: "notQualifiedNum",
        },
      ],
      currentData: [],
      reasonNum: 0,
      num: 0,
    };
  },
  methods: {
    cancel() {
      this.show = false;
      this.$parent.upDateTitle(this.$parent.appTitleText);
    },
    comfirm() {
      let reasons = [];
      let reasonTexts = [];
      let num = 0;
      for (let i = 0; i < this.currentData.length; i++) {
        const item = this.currentData[i];
        if (item.notQualifiedNum) {
          num = parseInt(num * 10000);
          num += parseInt(Number(item.notQualifiedNum) * 10000);
          num = num / 10000;
          if (Number(item.notQualifiedNum) > 0) {
            reasons.push(`${item.notQualifiedReason}:${item.notQualifiedNum}`);
            reasonTexts.push(
              `${item.notQualifiedReasonText}:${item.notQualifiedNum}`
            );
          }
        }
      }
      let form = {
        notQualifiedReason: reasons.join(","),
        notQualifiedReasonText: reasonTexts.join(","),
        notQualifiedNum: num,
      };
      this.show = false;
      this.$emit("comfirm", form, this.currentData);
    },
    showUp(arr) {
      this.currentData = JSON.parse(JSON.stringify(arr));
      this.show = true;
      this.getTotal();
    },
    formatInput(i, v) {
      this.currentData[i].notQualifiedNum = clearNoNum(v);
      this.getTotal();
    },
    getTotal() {
      let num = 0;
      let reasonNum = 0;
      for (let i = 0; i < this.currentData.length; i++) {
        const item = this.currentData[i];
        if (item.notQualifiedNum) {
          num = parseInt(num * 10000);
          num += parseInt(Number(item.notQualifiedNum) * 10000);
          num = num / 10000;
          reasonNum += Number(item.notQualifiedNum) > 0 ? 1 : 0;
        }
      }
      this.num = num;
      this.reasonNum = reasonNum;
    },
    subStrText(str, length) {
      let newStr = str;
      if (str) {
        if (str.length > length) {
          newStr = str.substr(0, length);
          newStr += "...";
        }
      } else {
        newStr = "--";
      }
      return newStr;
    },
  },
};
</script>
<style lang="scss" scoped>
.search-contents {
  position: fixed;
  width: 100%;
  height: calc(100vh - 0.5rem);
  background: #fff;
  z-index: 999999;
}
.pop-title {
  padding: 0.14rem 0;
  text-align: center;
  font-size: 0.15rem;
  font-weight: 400;
  position: relative;
  border-bottom: 0.01rem solid #eee;
  .closeable {
    width: 0.2rem;
    height: 0.2rem;
    padding-right: 0.14rem;
    position: absolute;
    right: 0.14rem;
    top: 0.14rem;
  }
}
.list-wrap {
  height: calc(100% - 1rem);
  overflow-y: scroll;
  // margin-top: 0.1rem;
  .list-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 0.01rem solid #eee;
  }
}
.search-bottoms {
  width: 60%;
  height: 0.5rem;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 0.11rem;
  box-sizing: border-box;
  font-size: 0.16rem;
  font-weight: 500;
  z-index: 999999;
  .btncancel {
    flex: 1;
    background: #f6f6f6;
    box-sizing: border-box;
    height: 0.39rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.03rem;
    margin-right: 0.11rem;
    color: #191f25;
    z-index: 999999;
  }
  .btnconfirm {
    flex: 1;
    background: #1890ff;
    box-sizing: border-box;
    height: 0.39rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.03rem;
    color: #ffffff;
    z-index: 999999;
  }
}
</style>
